<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>个人中心-银行卡管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <div th:include="includeJs::includeJs"></div>
    <div th:include="includeJs::layui_js"></div>

    <link rel="stylesheet" th:href="@{/css/account/lay-cz.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo/common.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo/user.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo/fileupload.less.css}">

    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <script type="text/javascript" th:src="@{/js/userInfo/common.js}"></script>
    <script type="text/javascript" th:src="@{/js/userInfo/user.js}"></script>
    <script type="text/javascript" th:src="@{/js/userInfo/iconfont.js}"></script>
    <style type="text/css">
        .bank-list{
            height: 150px;
            margin-top: 10px;
            padding-top: 15px;
            padding-left: 20px;
            border-radius: 10px;
            background-color: white;
            box-shadow: #c2c2c2 2px 3px 7px;
            transition: all 0.3s;
        }
        .bank-list:hover{
            margin-top: 0px;
            margin-left: -5px;
            box-shadow: #b4b4b4 3px 7px 12px 3px;
        }
        .bank-name{
            font-weight: bold;
            font-size: 18px;
            transition: font-size 0.5s;
        }
        .bank-number{
            font-weight: bold;
            font-size: 18px;
        }
        .bank-del{
            margin-top: -10px;
            padding: 10px 0px 10px 10px;
            float: right;
            cursor: pointer;
        }
    </style>
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            font-size: 18px;
            color: #F44336;
            margin-right: 15px;
        }
    </style>
</head>
<body>
<!--最上面-->
<link th:replace="includeJs::dingding_header">
<!--第二上面-->
<div style="background-color: white;width: 100%">
    <link th:replace="includeJs::dingding_nav">
</div>
<!--个人中心-->
<div class="wrapper wbgcolor">
    <div class="w1200 personal">
        <!--引入菜单栏-->
        <link th:replace="includeJs::userInfoMenu">
        <!--主要内容-->
        <div class="personal-main">
            <div class="personal-zhsz">
                <h3><i>银行卡管理</i></h3>
                <br>
                <br>
                <div class="layui-row layui-col-space30">
                    <div class="layui-col-md4" th:each="bank:${bankList}" style="height: 210px;">
                        <div class="bank-list">
                            <span class="bank-name" th:text="${bank.bankName}">中国建设银行</span>
                            <span th:onclick="'delBank('+${bank.BId}+')'" class="bank-del">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-shanchu"></use>
                                </svg>
                            </span>
                            <br>
                            <hr>
                            <img th:src="'https://apimg.alipay.com/combo.png?d=cashier&t='+${bank.bankCode}"><br>
                            <br>
                            <div class="bank-number" th:text="'•••• •••• •••• •••• '+${#strings.substring(bank.bankNumber,bank.bankNumber.length()-4,bank.bankNumber.length())}">•••• •••• •••• •••• ••••</div>
                        </div>
                    </div>
                </div>
                <button type="button" class="bank-add-btn layui-btn layui-btn-normal layui-btn-fluid">绑定新的银行卡</button>
            </div>
        </div>
    </div>
</div>
<div id="window" style="display: none">
    <br>
    <br>
    <div class="layui-form-item layui-col-md11">
        <label class="layui-form-label">银行卡号</label>
        <div class="layui-input-block">
            <input type="text" name="bankNum" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="银行卡号">
        </div>
    </div>
    <div class="layui-form-item layui-col-md11">
        <label class="layui-form-label" >手机号</label>
        <div class="layui-input-block">
            <input type="text" name="phone" required  lay-verify="required" autocomplete="off" class="layui-input" th:placeholder="'您尾号 '+${phone}+' 的手机号'">
        </div>
    </div>
    <div class="layui-form-item layui-col-md11">
        <div class="layui-inline layui-col-md8">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-block">
                <input type="text" name="verify" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="收到的验证码">
            </div>
        </div>
        <div class="layui-inline layui-col-md3">
            <button id="sendBankVerify" class="layui-btn layui-btn-fluid layui-btn-normal">发送验证码</button>
        </div>
    </div>
    <div class="layui-form-item layui-col-md10 layui-col-md-offset1">
        <button id="bandBank" class="layui-btn layui-btn-normal layui-btn-fluid">绑定</button>
    </div>
</div>

<link th:replace="includeJs::userInfoJS">
<script>
    $(".bank-add-btn").click(()=>{
        var btn = this;
        btn.disabled = true;
        var loading = layer.load(2);
        //console.log("绑定银行卡")
        $.ajax({
            url:"queryIsPayPWD",
            type:"post",
            data:{},
            dataType:"text",
            success:(data)=>{
                if ("success" == data) {
                    btn.disabled = false;
                    layer.close(loading);
                    var bandAddWindows = layer.open({
                        type: '1',
                        area: ["500px","320px"],
                        title: '绑定银行卡',
                        closeBtn: 1, //不显示关闭按钮
                        fixed: false, //不固定
                        shadeClose: true, //开启遮罩关闭
                        content: $("#window"),
                    });
                } else if ("PWDUndefined" == data) {
                    layer.msg("未设置支付密码，请前往账户设置里设置",{time: 3000, icon:7})
                }
            },
            error:()=>{btn.disabled = false;
                layer.close(loading);
                console.log("服务器繁忙")
            }
        })
    })

    $("#sendBankVerify").click(function () {
        var bankLoad = layer.load(0, {shade: false});
        var bankBtn = this;
        this.style.cursor = "no-drop";
        this.disabled = true;
        var phone = $("input[name='phone']");
        if (phone.val() == null || phone.val().length == 0) {
            layer.msg("请先填写手机号",{time: 3000, icon:7})
            layer.close(bankLoad);
            phone.focus();
            this.style.cursor = "pointer";
            this.disabled = false;
            return;
        }
        $.ajax({
            url:"/sendBankVerify",
            type:"post",
            data:{
                'phone' : phone.val()
            },
            dataType:"text",
            success:(data)=>{
                layer.close(bankLoad);
                if (data == "success") {
                    //console.log("发送成功");
                    layer.msg("发送成功 请注意查收",{time: 3000, icon:1})
                    setTimeout(()=>{
                        bankBtn.style.cursor = "pointer";
                        bankBtn.disabled = false;
                    },60 * 1000)
                } else {
                    //console.log(data);
                    phone.focus();
                    layer.msg(data,{time:3000,icon:2})
                    bankBtn.style.cursor = "pointer";
                    bankBtn.disabled = false;
                }
            },
            error:()=>{
                //console.log("错误")
            }
        })
    })

    $("#bandBank").click(()=>{
        var bankNum = $("input[name='bankNum']");
        var phone = $("input[name='phone']");
        var verify = $("input[name='verify']");

        var loading = layer.load(2);
        var btn = this;
        $(btn).css("cursor","no-drop");
        btn.disabled = true;

        var data = {
            'bankNum':bankNum.val(),
            'phone':phone.val(),
            'verify':verify.val(),
        }
        $.ajax({
            url:"/bandBank",
            type:"post",
            data:data,
            dataType:"text",
            success:(data)=>{
                layer.close(loading)
                var btn = this;
                $(btn).css("cursor","pointer");
                btn.disabled = false;
                if (data == "success") {
                    window.location.reload();
                } else {
                    layer.msg(data,{time: 3000, icon:7})
                }
            },
            error:()=>{
                layer.close(loading)
                var btn = this;
                $(btn).css("cursor","pointer");
                btn.disabled = false;
                console.log("服务器繁忙")
            }
        })
    })
    function delBank(bId) {
        layer.confirm('确定要解绑银行卡吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            var loading = layer.load(1, {
                shade: [0.1,'#333'] //0.1透明度的白色背景
            });
            $.ajax({
                url:"/sendDelBank",
                type:"post",
                data: {},
                dataType:"text",
                success:(data)=>{
                    layer.close(loading)
                    if (data == "success") {
                        layer.prompt({title: '输入短信验证码 并确认', formType: 3}, function(text, index){
                            $.ajax({
                                url:"/delBank",
                                type:"post",
                                data: {
                                    code:text,
                                    bId:bId,
                                },
                                dataType:"text",
                                success:(data)=>{
                                    if (data == "success") {
                                        layer.msg("删除成功",{time: 3000, icon:1})
                                        setTimeout(()=>{
                                            window.location.reload();
                                        },3000)
                                    } else {
                                        layer.msg(data,{time: 2000, icon:7})
                                    }
                                },
                                error:()=>{
                                    //console.log("错误")
                                }
                            })
                        });
                    } else {
                        layer.msg(data,{time: 3000, icon:7})
                        window.location.reload();
                    }
                },
                error:()=>{
                    //console.log("错误")
                }
            })
        });
    }

</script>
</body>
</html>
